// 商品列表子组件 查看用弹框
import '../../../css/GoodListRes.css'
import React, { useState, useEffect } from 'react';
import { Button, Upload, Modal, message, Form, Input, Switch, Select } from 'antd';

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';



// 表格
interface DataType {
    goodsId: number;
    goodsImg: string;
    goodsName: string;
    goodsBrandId: number;
    goodsSell: string;
    brandName: string;
    goodsStatus: string;
    goodsPriceRange: string;
    goodsSernum: string;
    goodsSer: string;
    categoryName: string;



}

// 传递参数
interface PropsType {
    modalClose1(): void,
    isModalOpen1: boolean,
    head: string | null,
    che: DataType | null
}


export default function check(props: PropsType) {




    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();//装图片
    // const [imgFile, setImgFile] = useState<RcFile | null>(null)  //装选中图片的file 类型
    const [form] = Form.useForm()//使用From表单，用于默认值

    // 初始化
    useEffect(() => {


        form.setFieldsValue({
            goodsId: props.che?.goodsId,
            goodsName: props.che?.goodsName,
            goodsBrandId: props.che?.goodsBrandId,
            goodsSell: props.che?.goodsSell,
            brandName: props.che?.brandName,
            goodsStatus: props.che?.goodsStatus,
            goodsPriceRange: props.che?.goodsPriceRange,
            categoryName: props.che?.categoryName,
            goodsSernum: props.che?.goodsSernum,
            goodsSer: props.che?.goodsSer,
        })
        let url = props.che?.goodsImg
        setImageUrl(props.che?.goodsImg)
        // console.log('url====', url);

    }, [props])
    // 对话框部分

    const handleOk = () => {
        props.modalClose1()
    };

    const handleCancel = () => {
        props.modalClose1()
    };




    // 头像部分
    const getBase64 = (img: RcFile, callback: (url: string) => void) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result as string));
        reader.readAsDataURL(img);
    };

    const beforeUpload = (file: RcFile) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    };


    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {

            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    return (
        <>
            <Modal title={props.head} open={props.isModalOpen1} onOk={handleOk}
                onCancel={handleCancel}


                footer={null} >

                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}

                    autoComplete="off"
                    form={form}
                >
                    <Form.Item label="商品名称" name="goodsName">
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label="货号" name="goodsId">
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label="价格" name='goodsPriceRange'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label="品牌" name='brandName'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label="销量" name='goodsSer'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label="分类" name='categoryName' >
                        <Select placeholder="请选择商品分类" style={{ width: 165 }} disabled>
                            <Select.Option value="demo">外套</Select.Option>
                            <Select.Option value="demo">冲锋衣</Select.Option>
                        </Select>

                    </Form.Item>

                    <Form.Item label="是否上架" name='goodsStatus' valuePropName="checked" >
                        <Switch disabled />
                    </Form.Item>
                    <Form.Item label="商品图片" name='goodsImg'>
                        <Upload disabled
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
                            beforeUpload={beforeUpload}
                            onChange={handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>


                    {/* 操作按钮 */}
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }} className='opreate'>

                        <Button type="primary" onClick={handleCancel} className='cancel'>关闭</Button>
                    </Form.Item>

                </Form >
            </Modal>

        </>
    );
};
